<template>
	<view class="content">
		<view class="header">
			<text class="title">RGB & Concentration Analysis System</text>
			<text class="subtitle">For analyzing the relationship between RGB values and concentration</text>
		</view>
		
		<view class="card-container">
			<view class="card" @click="navigateTo('/pages/data-input/data-input')">
				<view class="card-icon">
					<text class="icon">📊</text>
				</view>
				<view class="card-content">
					<text class="card-title">Data Input</text>
					<text class="card-description">Enter RGB values and concentrations step-by-step, batch import supported</text>
				</view>
			</view>
			
			<view class="card" @click="navigateTo('/pages/analysis/analysis')">
				<view class="card-icon">
					<text class="icon">📈</text>
				</view>
				<view class="card-content">
					<text class="card-title">Data Analysis</text>
					<text class="card-description">Analyze RGB-concentration relationship, display error bars and regression line</text>
				</view>
			</view>
			
			<view class="card" @click="navigateTo('/pages/formula/formula')">
				<view class="card-icon">
					<text class="icon">🔬</text>
				</view>
				<view class="card-content">
					<text class="card-title">Concentration Calculation</text>
					<text class="card-description">Calculate corresponding concentration based on RGB values</text>
				</view>
				</view>
			</view>
			
		<view class="info-section">
			<text class="info-title">Instructions</text>
			<view class="info-content">
				<text class="info-item">1. First, click "Data Input" to enter RGB values and corresponding concentrations.</text>
				<text class="info-item">2. After entering RGB values, add the corresponding concentration and error.</text>
				<text class="info-item">3. Once data entry is complete, go to "Data Analysis" to view regression results.</text>
				<text class="info-item">4. Use "Concentration Calculation" to directly calculate concentration from RGB values.</text>
			</view>
		</view>
		
		<view class="footer">
			<text class="version">Version: 2.0.0</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			// 检查是否有完整数据
			this.checkData();
		},
		methods: {
			// 页面导航
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			
			// 检查是否有完整数据
			checkData() {
				try {
					const completeData = uni.getStorageSync('completeData');
					if (completeData) {
						const dataArray = JSON.parse(completeData);
						if (dataArray && dataArray.length > 0) {
							console.log('Existing data found, number of data points:', dataArray.length);
				}
					}
				} catch (e) {
					console.error('Failed to check data', e);
						}
			}
		}
	}
</script>

<style>
	.content {
		padding: 30rpx;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}
	
	.header {
		text-align: center;
		margin-bottom: 50rpx;
	}
	
	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #666;
	}
	
	.card-container {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		margin-bottom: 50rpx;
	}
	
	.card {
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		padding: 30rpx;
		display: flex;
		align-items: center;
		transition: transform 0.2s;
	}
	
	.card:active {
		transform: scale(0.98);
	}
	
	.card-icon {
		background-color: #f0f7ff;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
	}
	
	.icon {
		font-size: 50rpx;
	}
	
	.card-content {
		flex: 1;
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.card-description {
		font-size: 26rpx;
		color: #666;
	}
	
	.info-section {
		background-color: #f5f5f5;
		border-radius: 15rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
	}
	
	.info-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.info-content {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}
	
	.info-item {
		font-size: 26rpx;
		color: #555;
		line-height: 1.5;
	}
	
	.footer {
		margin-top: auto;
		text-align: center;
		padding: 20rpx 0;
	}
	
	.version {
		font-size: 24rpx;
		color: #999;
	}
</style>
